<layout name="popup" />
<block name="content">
	<style>
		#addr_list label {
			display: block;
			width: 100%;
			padding-left: 10px;
			line-height: 28px;
			height: 28px;
		}
		.selected li {
			padding-left: 8px;
			height: 28px;
			line-height: 28px;
			border-bottom: 1px solid #ccc;
		}
		.selected .del {
			display: inline-block;
			font-family: FontAwesome;
			width: 20px;
			line-height: 27px;
			padding-left: 4px;
			padding-right: 2px;
			color: #ed5565;
			cursor: pointer;
			text-align: center;
			float: right;
		}
		.selected .del::after {
			font-style: normal;
			content: "\f00d";
		}
	</style>
	<input type="hidden" name="ajax" id="ajax" value="1">
	<div class="popup-header">
		<div class="input-box" style="margin-top:6px;">
			<select class="select w16" name="type" id="type">
				<option value="dept">部门</option>
				<option value="position">职位</option>
			</select>
			<i class="icon"></i>
		</div>
		<a class="btn btn-normal w5" onclick="save();">确定</a>
		<a class="btn btn-return w5" onclick="close_popup();">取消</a>
	</div>
	<div class="popup-body">
		<div class="popup-body-scroll">
			<div class="popup-content">
				<div class="row">
					<div class="w29 x1" style="display:flex;">
						<div class="w22">
							<b class="popup-label">地址簿</b>
							<div class="list-box" style="height:171px;">
								<div id="dept" class="hidden" style="height:171px;border:1px solid #ccc;background: #fff;overflow-y: scroll;">
									<div class="tree-menu">
										{:widget('html/tree_menu',array($dept_tree))}
									</div>
								</div>
								<div id="position" class="hidden" style="height:171px;border:1px solid #ccc;background: #fff;overflow-y: scroll;">
									<div class="tree-menu">
										{:widget('html/tree_menu',array($position_tree))}
									</div>
								</div>
							</div>
							<label class="checkbox" style="padding-left:5px;">
								<input type="checkbox" class="toggle-select-all" data="addr_id">
								<i class="icon"></i>全选</label>
							<div>
								<div id="addr_list" style="width:100%;height:171px;background: #fff;border:1px solid #ccc;z-index:3;overflow-y: scroll;"></div>
							</div>
						</div>
						<div class="w7 x1" style="text-align:center;margin-top:24px;">
							<div style="height:135px;">
								<a onclick="add_to_rc()" class="btn btn-normal" ><i class="fa fa-angle-double-right"></i>添加</a>
							</div>
							<div style="height:135px;">
								<a onclick="add_to_cc()" class="btn btn-normal hidden"><i class="fa fa-angle-double-right"></i>编辑</a>
							</div>
							<a onclick="add_to_bcc()" class="btn btn-normal hidden"><i class="fa fa-angle-double-right"></i>访问</a>
						</div>
					</div>
					<div class="w22">
						<div class="w22">
							<b class="popup-label">已选人员</b><span id="rc_count"></span>
							<div id="rc" class="selected" style="width:100%;height:379px;overflow-y:auto;background: #fff;border:1px solid #ccc;">
								<ul></ul>
							</div>
							<b class="popup-label hidden">编辑</b><span id="cc_count hidden"></span>
							<div id="cc" class="selected hidden" style="width:100%;height:110px;overflow-y:auto;background: #fff;border:1px solid #ccc;">
								<ul></ul>
							</div>
							<b class="popup-label hidden">访问</b><span id="bcc_count hidden"></span>
							<div id="bcc" class="selected hidden" style="width:100%;height:110px;overflow-y:auto;background: #fff;border:1px solid #ccc;">
								<ul></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		var index = parent.layer.getFrameIndex(window.name);
		layui.use(['global'], function() {
			var $ = layui.jquery;

			var fn = {
				save : function() {
					$("#rc.selected li").each(function(i) {
						emp_no = $(this).attr('data');
						name = trim($(this).text());
						name = name.replace(/<.*>/, '');
						html = conv_inputbox_item(name, emp_no);
						$("#member_list .data-list", parent.document).append(html);
					});

					$("#cc.selected li").each(function(i) {
						emp_no = $(this).attr('data');
						name = trim($(this).text());
						name = name.replace(/<.*>/, '');
						html = conv_inputbox_item(name, emp_no);
						$("#write_list .data-list", parent.document).append(html);
					});

					$("#bcc.selected li").each(function(i) {
						emp_no = $(this).attr('data');
						name = trim($(this).text());
						name = name.replace(/<.*>/, '');
						html = conv_inputbox_item(name, emp_no);
						$("#read_list .data-list", parent.document).append(html);
					});
					parent.layer.close(index);
				},
				close_popup : function() {
					parent.layer.close(index);
				},
				add_address : function(name) {
					$("input:checked[name='addr_id']").each(function() {
						$text = $(this).parent().text().trim();
						$val = $(this).val();
						if ($("#" + name + ".selected li[data='" + $val + "']").length == 0) {
							$li = $('<li><span></span><i class="del"></i></li>');
							$li.find('span').text($text);
							$li.attr('data', $val);
							$li.appendTo("#" + name + ".selected ul");
							recount();
						};
					});
					$("#addr_list input:checked").prop('checked', false);
					$(".toggle-select-all").prop('checked', false);
				},
				add_to_rc : function() {
					this.add_address('rc');
				},
				add_to_cc : function() {
					this.add_address('cc');
				},
				add_to_bcc : function() {
					this.add_address('bcc');
				},
			};
			win_exp(fn);

			set_val('type', '{$type}');
			$("#{$type}").removeClass("hidden");
			$("#type").on('change', function() {
				$(".list-box>div").addClass('hidden');
				$('#' + this.value).removeClass("hidden");
			});

			//点击节点时读取相应的数据
			$(".tree-menu a").click(function() {
				$(".tree-menu a").removeClass("active");
				var type = $("#type").val();
				$this = $(this);
				$this.addClass("active");
				var vars = {};
				vars.type = type;
				vars.id = $this.attr('node');
				vars.id = send_ajax("{:url('popup/read')}", vars, function(ret) {
					show_data(ret);
				});
				return false;
				//禁止连接生效
			});

			function show_data(ret) {
				$("#addr_list").html("");
				var type = $("#type").val();
				var dept_enable = false;
				if (type == "dept" && dept_enable) {
					var dept_id = "dept_" + $("#dept a.active").attr("node");
					var dept_name = $("#dept a.active").text();
					var name = dept_name + "[部门]";
					var html_string = conv_address_item(name, dept_id);
					$("#addr_list").html(html_string);
				}
				for (s in ret.data) {
					var emp_no = ret.data[s].emp_no;
					var user_id = ret.data[s].id;
					var data = user_id;

					var position_name = ret.data[s].position_name;
					var user_name = ret.data[s].name;
					var name = user_name + "[" + position_name + "]";

					var html_string = conv_address_item(name, data);
					$("#addr_list").append(html_string);
				}
			};

			function recount() {
				$("#rc_count").text("(" + $("#rc.selected li").length + ")");
				$("#cc_count").text("(" + $("#cc.selected li").length + ")");
				$("#bcc_count").text("(" + $("#bcc.selected li").length + ")");
			};

			$(document).on("click", ".selected i.del", function() {
				$(this).parent().remove();
				recount();
			});
		});

	</script>
</block>
